<template>
    <div class="author-rank-item" @click="clickAuthor">
      <div style="display: flex">
        <img class="avatar" :src="author.avatar" alt="">
        <div>
          <p class="name">
            <span class="username">{{ author.username }}</span>
            <level :level="author.level"/>
          </p>
          <p class="job">
            <span v-if="author.job">{{ author.job }} | </span>
            <span v-if="author.university">{{ author.university }} | </span>
            <span>{{ author.company }}</span>
          </p>
          <p class="introduction">{{ author.introduction }}</p>
        </div>
      </div>
      <el-button type="success" plain @click.stop="focus(author.article)">关注</el-button>
    </div>
</template>

<script>
import Level from "@/components/level";

export default {
  name: "author-rank-item",
  components: {Level},
  props: {
    author: Object
  },
  methods: {
    focus(id) {
      console.log('关注' + id)
    },
    clickAuthor() {
      window.open('https://www.baidu.com')
    }
  }
}
</script>

<style lang="less" scoped>
.author-rank-item {
  .flex-center(space-between);
  padding: 20px;
  border-bottom: 1px solid #f1f1f1;
  cursor: pointer;

  &:hover {
    background-color: #fcfcfc;
  }

  .avatar {
    .size(60px);
    border-radius: 50%;
    margin-right: 20px;
  }

  .name {
    font-size: 16px;
    .flex-center();

    .username {
      margin-right: 10px;
    }
  }

  .job {
    font-size: 13px;
    color: #b9c0c8;
    margin: 4px 0;
  }

  .introduction {
    font-size: 13px;
    color: #777d81;
  }
}
</style>